<template>
	<view>
		<view class="bg">
			<view class="detail">
				<view class="price">
					<text>¥20000</text>
				</view>
				<view class="amount">
					<text>订单总金额</text>
				</view>
			</view>
		</view>
		<view class="c1-list">
			<view class="c1">
				<image class="logo" src="../../../static/微信.png" mode=""></image>
				<text style="margin-left: -355rpx;margin-top: 10rpx;">微信支付</text>
				<image class="more" src="../../../static/展开.png" style="margin-top: 20rpx;" mode=""></image>
			</view>
			
			<view class="c1" @click="goToBalancePay">
				<image class="logo" src="../../../static/账户余额.png" mode=""></image>
				<text style="margin-left: -300rpx;margin-top: 10rpx;">账户余额支付</text>
				<image class="more" src="../../../static/展开.png" style="margin-top: 20rpx;" mode=""></image>
			</view>
	</view>
	</view>
</template>

<script>
	export default {
	   data() {
				return {
				}
			},
		methods:{
			goToBalancePay(){
				uni.navigateTo({
					url:'../balancePay/balancePay'
				})
			}
		 }
		}
</script>

<style lang="scss" scoped>
	.bg{
		width: 90%;
		margin: 5%;
		height: 260rpx;
		background-color: #fafafa;
		border-radius: 10rpx;
		position: relative;
	}
	
	.bg .price {
		text-align: center;
		font-size: 48rpx;
		font-weight: 700;
		color: #c6100e;
	}
	
	.bg .amount {
		text-align: center;
		font-size: 28rpx;
	}
	
	.bg .detail {
		position: absolute;
		top: 60rpx;
		left: 280rpx;
	}
	
	.slot-content {
		width: 90%;
		margin: 5%;
		background-color: #fefffe;
		height: 100rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-around;
		position: relative;
	}
	
	.slot-content text {
		margin-left: 40rpx;
		line-height: 100rpx;
	}
	
	.slot-content .icon {
		position: absolute;
		top: 40rpx;
		right: 40rpx;
	}
	
	.slot-content .inps {
		width: 60%;
		margin-left: 20rpx;
		margin-top: 14rpx;
	}
	
	.slot-content .inp {
		width: 60%;
		margin-left: 50rpx;
		margin-top: 14rpx;
	}
	
	.slot-content .btn {
		width: 200rpx;
		height: 40rpx;
		margin-top: 30rpx;
	}
	
	.c1 {
		display: flex;
		width: 90%;
		margin: 5%;
		justify-content: space-between;
	}
	
	.c1-list {
		width: 96%;
		margin: 2%;
	}
	
	.c1 .logo {
		width: 60rpx;
		height: 60rpx;
	}
	
	.c1 .more {
		width: 24rpx;
		height: 24rpx;
	}
</style>
